<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>地理编码(地址->经纬度)</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <style>
        html,body,#container{
            height:100%;
            width:100%;
        }
        .btn{
            width:10rem;
            margin-left:6.8rem;   
        }
    </style>
</head>
<body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>>
<div id="container"></div>
<div class="input-card" style='width:28rem;'>
    <label style='color:grey'>路线规划</label>
    <div class="input-item">
            <div class="input-item-prepend"><span class="input-item-text" >出发点</span></div>
            <input id='address' type="text" value='厦门南普陀' ><br />
    </div>
     <div class="input-item">
            <div class="input-item-prepend"><span class="input-item-text" >目的地</span></div>
             <input id='address2' type="text" value='桂林国家森林公园' ><br />
    </div>
     <div class="input-item">
            <div class="input-item-prepend"><span class="input-item-text" >途经景点</span></div>
            <input id='address3' type="text" value='杭州西湖' ><br />
    </div>
    <div class="input-item">
            <div class="input-item-prepend"><span class="input-item-text" >途经景点</span></div>
            <input id='address4' type="text" value='安徽黄山' ><br />
    </div>
    <div class="input-item">
            <div class="input-item-prepend"><span class="input-item-text" >途经景点</span></div>
            <input id='address5' type="text" value='武汉欢乐谷' ><br />
    </div>
   
    <form action="route" method="post" onsubmit="return checkval()" >  
    <div class="input-item">
            <div class="input-item-prepend"><span class="input-item-text">景点位置</span></div>
            <input id='lnglat' type="text" name="begin" readonly>
          
    </div>
      <div class="input-item">
            <div class="input-item-prepend"><span class="input-item-text">景点位置</span></div>
            <input id='lnglat2' type="text" name="end" readonly>
    </div>
      <div class="input-item">
            <div class="input-item-prepend"><span class="input-item-text">景点位置</span></div>
            <input id='lnglat3' type="text" name="way" readonly>
    </div>
    <div class="input-item">
            <div class="input-item-prepend"><span class="input-item-text">景点位置</span></div>
            <input id='lnglat4' type="text" name="way2" readonly>
    </div>
    <div class="input-item">
            <div class="input-item-prepend"><span class="input-item-text">景点位置</span></div>
            <input id='lnglat5' type="text" name="way3" readonly>
    </div>
      <input id="geo" type="button" class="btn" value="景点信息" /> 
    <input id="submit" type="submit" class="btn" value="路线规划" />
    </form>
   
</div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=e81e352f4489270819adc173133718c0&plugin=AMap.Geocoder"></script>
<script type="text/javascript">
/* 表单提交前校验 ,如果用户没有输入地点，就把地点设置成厦门南普陀,如果用户没有获取位置信息，将无法提交 */
function checkval(){
	   if($("#address").val()==null||$("#address").val()==""){
		   $("#lnglat").val("118.096527,24.441026");
	   }
	   if($("#address2").val()==null||$("#address2").val()==""){
		   $("#lnglat2").val("118.096527,24.441026");
	   }
	   if($("#address3").val()==null||$("#address3").val()==""){
		   $("#lnglat3").val("118.096527,24.441026");
	   }
	   if($("#address4").val()==null||$("#address4").val()==""){
		   $("#lnglat4").val("118.096527,24.441026");
	   }
	   if($("#address5").val()==null||$("#address5").val()==""){
		   $("#lnglat5").val("118.096527,24.441026");
	   }
	   if($("#lnglat").val()==null||$("#lnglat").val()==""||$("#lnglat2").val()==null||$("#lnglat5").val()==""||$("#lnglat2").val()==""||$("#lnglat3").val()==null||$("#lnglat3").val()==""||$("#lnglat4").val()==null||$("#lnglat4").val()==""||$("#lnglat5").val()==null){
		  alert("请先获取景点信息");
		   return false;
	   }
	   alert("填写正确的景点名称并获取景点信息，系统将为您规划路线，若景点信息不正确，系统将无法为您规划正确路线，若您没有填写，系统将默认设置成地点为'厦门南普陀寺' ");
	   return true;
}

</script>
<script type="text/javascript">
    var map = new AMap.Map("container", {
        resizeEnable: true
    });
    
    var geocoder,marker;
    function geoCode() {
        if(!geocoder){
            geocoder = new AMap.Geocoder({
               // city: "010", //城市设为北京，默认：“全国”
               batch:true,//表示可以支持多个地点搜索
            });
        }
        //取到三个文本框中的搜索值
        var address  = document.getElementById('address').value;
        var address2  = document.getElementById('address2').value;
        var address3  = document.getElementById('address3').value;
        var address4  = document.getElementById('address4').value;
        var address5  = document.getElementById('address5').value;
        //分别向api接口请求数据
        geocoder.getLocation(address,function(status, result) {
            if (status === 'complete'&&result.geocodes.length) {
            	
                var lnglat = result.geocodes[0].location
                console.log(lnglat)
                document.getElementById('lnglat').value = lnglat;
                if(!marker){
                    marker = new AMap.Marker();
                    map.add(marker);
                }
                marker.setPosition(lnglat);
                map.setFitView(marker);
            }
        });
        geocoder.getLocation(address2,function(status, result) {
            if (status === 'complete'&&result.geocodes.length) {
                var lnglat2 = result.geocodes[0].location
                document.getElementById('lnglat2').value = lnglat2;
                if(!marker){
                    marker = new AMap.Marker();
                    map.add(marker);
                }
                marker.setPosition(lnglat);
                map.setFitView(marker);
            }
        });
        geocoder.getLocation(address3,function(status, result) {
            if (status === 'complete'&&result.geocodes.length) {
                var lnglat3 = result.geocodes[0].location
                document.getElementById('lnglat3').value = lnglat3;
                if(!marker){
                    marker = new AMap.Marker();
                    map.add(marker);
                }
                marker.setPosition(lnglat);
                map.setFitView(marker);
            }
        });
        geocoder.getLocation(address4,function(status, result) {
            if (status === 'complete'&&result.geocodes.length) {
                var lnglat4 = result.geocodes[0].location
                document.getElementById('lnglat4').value = lnglat4;
                if(!marker){
                    marker = new AMap.Marker();
                    map.add(marker);
                }
                marker.setPosition(lnglat);
                map.setFitView(marker);
            }
        });
        geocoder.getLocation(address5,function(status, result) {
            if (status === 'complete'&&result.geocodes.length) {
                var lnglat5 = result.geocodes[0].location
                document.getElementById('lnglat5').value = lnglat5;
                if(!marker){
                    marker = new AMap.Marker();
                    map.add(marker);
                }
                marker.setPosition(lnglat);
                map.setFitView(marker);
            } 
        });
    }
    document.getElementById("geo").onclick = geoCode;

    //按回车键执行搜素
//  document.getElementById('address').onkeydown = function(e) {
//      if (e.keyCode === 13) {
//          geoCode();
//          return false;
//      }
//      return true;
//  };
</script>
</body>
</html>